<div class="panel panel-default page-panel logs-page">

  <div class="panel-heading clearfix">
    <div class="panel-title pull-left">
      <h3 translate="logs.title">Logs</h3>
    </div>

    <div class="pull-left filter-toolbar">

      <span class="sort-by-label">Severity:</span>
      <div class="btn-group severity-dropdown">

        <button class="btn btn-link dropdown-toggle icon-button" type="button" data-toggle="dropdown">
          <span ng-if="!filterSeverity" translate="logs.all">All</span>
          <span ng-if="filterSeverity">{{filterSeverity}}</span>
        </button>

        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="severityFilterChanged(undefined);">
              <span translate="logs.all">All</span>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="severityFilterChanged('INFO');">
              <span>INFO</span>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="severityFilterChanged('DEBUG');">
              <span>DEBUG</span>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="severityFilterChanged('WARN');">
              <span>WARN</span>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="severityFilterChanged('ERROR');">
              <span>ERROR</span>
            </a>
          </li>

        </ul>
      </div>


      <span class="sort-by-label" ng-if="pipelines.length">Pipeline:</span>
      <div class="btn-group pipeline-dropdown" ng-if="pipelines.length">

        <button class="btn btn-link dropdown-toggle icon-button" type="button" data-toggle="dropdown">
          <span ng-if="!filterPipeline" translate="logs.all">All</span>
          <span ng-if="filterPipeline">{{filterPipelineLabel}}</span>
        </button>

        <ul class="dropdown-menu" role="menu"
            aria-labelledby="dropdownMenu1">

          <li role="presentation" ng-if="common.isUserAdmin">
            <a role="menuitem" tabindex="-1" ng-href="collector/logs">
              <span translate="logs.all">All</span>
            </a>
          </li>

          <li role="presentation" ng-repeat="pipeline in pipelines">
            <a role="menuitem" tabindex="-1" ng-href="collector/logs/{{pipeline.title}}/{{pipeline.name}}">
              <span>{{pipeline.title}}/{{pipeline.name}}</span>
            </a>
          </li>

        </ul>
      </div>

      <a ng-if="filterPipeline" ng-href="collector/pipeline/{{filterPipeline}}">( view pipeline... )</a>

    </div>

    <div class="pull-right">
      <button type="button"
              ng-if="logEndingOffset !== 0"
              class="btn btn-primary btn-sm"
              ng-disabled="fetchingLog"
              ng-click="loadPreviousLog()">
        <span ng-hide="fetchingLog">
          {{'logs.loadPreviousLog' | translate}}
        </span>

        <span ng-show="fetchingLog">
          {{'logs.loadingLog' | translate}}
        </span>
      </button>

      <div class="btn-group download-btn-group" ng-if="logFiles && logFiles.length && common.isUserAdmin">
        <a href="/rest/v1/system/logs/files/{{logFiles[0].file}}?attachment=true" target="_self"
           class="btn btn-primary btn-sm">{{'logs.download' | translate}}</a>
        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu pull-right" role="menu">
          <li ng-repeat="logFile in logFiles">
            <a href="/rest/v1/system/logs/files/{{logFile.file}}?attachment=true" target="_self">{{logFile.file}}</a>
          </li>
        </ul>
      </div>

      <button type="button" class="btn btn-primary btn-sm"  ng-if="common.isUserAdmin" ng-click="onLogConfigClick()">
        {{'logs.logConfig.headerLabel' | translate}}
      </button>

      <button type="button" class="btn btn-primary btn-sm"  ng-if="common.isUserAdmin" ng-click="toggleAutoFetch()">
        {{(pauseLogAutoFetch ? 'logs.autoFetchContinue' : 'logs.autoFetchPause') | translate}}
      </button>

      <button type="button" class="btn btn-primary btn-sm"
              ng-click="refreshLogs()">{{'global.form.refresh' | translate}}</button>
    </div>

  </div>

  <ng-include src="'app/home/alerts/error/errorAlert.tpl.html'"></ng-include>
  <ng-include src="'app/home/alerts/error/errorModal.tpl.html'"></ng-include>

  <div class="panel-body"
       ng-style="{'height': (windowHeight - 60 - 51) + 'px', 'width': (windowWidth) + 'px'}" resize>

    <table class="table log-table" ng-if="!loading">
      <thead>
      <tr>
        <th>Timestamp</th>
        <th>Pipeline</th>
        <th>Severity</th>
        <th>Message</th>
        <th>Category</th>
        <th>User</th>
        <th>Runner</th>
        <th>Thread</th>
      </tr>
      </thead>

      <tbody>

      <tr ng-if="logMessages.length && logEndingOffset !== 0">
        <td colspan="7"> ........................................................................................................................................................................................................................................................................................</td>
      </tr>

      <tr ng-repeat-start="logMessage in logMessages track by $index" scroll-to-bottom="logMessages">
        <td>{{logMessage.timestamp}}</td>
        <td>{{logMessage['s-entity']}}</td>
        <td>{{logMessage.severity}}</td>
        <td>{{logMessage.message}}</td>
        <td>{{logMessage.category}}</td>
        <td>{{logMessage['s-user']}}</td>
        <td>{{logMessage['s-runner']}}</td>
        <td>{{logMessage.thread}}</td>
      </tr>

      <tr ng-repeat-end ng-if="logMessage.exception">
        <td colspan="7">
          <div class="log-exception">
            <span>{{logMessage.exception}}</span>
          </div>
        </td>
      </tr>

      <tr ng-if="logMessages.length == 0">
        <td colspan="7">{{'logs.noLogsMessage' | translate}}</td>
      </tr>

      </tbody>
    </table>


    <div class="stage-libraries-loading">
      <div class="pipeline-home-loading" show-loading="loading"></div>
    </div>

  </div>
</div>
